<template>
  <div>
    <div id="backtop" class="backtop" @click="backTop" >up</div>
  </div>
</template>

<script>
    export default {
        name: "BackUp",
        mounted() {
            window.addEventListener('scroll', this.scrollEvent,false)
        },
        methods:{
            backTop:function () {
                // document.getElementById("backtop").style.backgroundColor="rgb(216,216,216)"
                let timer = setInterval(function () {
                    let heig = parseInt(window.scrollY);
                    if (heig > 0) {
                        window.scrollTo(0, heig-50);
                    }else {
                        clearInterval(timer);
                    }
                }, 1)
            },
            scrollEvent() {
                let height = parseInt(window.scrollY);
                if (height > 0) {
                    document.getElementById("backtop").style.color="#EFF3F5"
                    document.getElementById("backtop").style.backgroundColor="rgb(164, 164, 164)"
                    // document.getElementById("backtop").style.display="block"
                }else{
                    document.getElementById("backtop").style.color="transparent"
                    document.getElementById("backtop").style.backgroundColor="transparent"
                    // document.getElementById("backtop").style.display="none"
                }
            },
            routerView(val){
                this.component = val
            },
        }
    }
</script>

<style scoped>
  .backtop{
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 36px;
    border-radius: 2px;
    font-size: 20px;
    position: fixed;
    bottom: 20px;
    right: 5px;
    transition: 0.5s;
    color: transparent;
    cursor: pointer;
    z-index: 999;
  }
</style>
